<template>
	<!-- 底部模块 -->
	<footer id="footer" class="footer-bar" v-once>
		© {{ copyrightYear }}
		<RouterLink class="link-color" to="/">{{ name }}</RouterLink>

		&nbsp;&nbsp;&nbsp;

		<a class="lang link-color" v-for="(item, locale) in locales" @click="changeI18nLang(locale)">{{ item.title }}</a>
	</footer>
</template>


<script type="module">
	import { LOCALES, changeI18nLocale } from '@/i18n'
	import { app } from '@/config/config';
	
	export default {
		data() {
			return {
				name: app.name,
				// locales: config.i18n.locales,
				locales: LOCALES,
				copyrightYear: Object.freeze(new Date().getFullYear()),
			};
		},
		methods: {
			changeI18nLang(lang) {
				changeI18nLocale(lang);
			}
		}
	} 
</script>


<style scoped>
	.footer-bar {
		width: 100%;
		height: 41px;

		line-height: 40px;
		text-align: center;

		border-top: 1px solid #eee;
	}

	.footer-bar .lang {
		display: inline-block;
		padding: 0 6px;
		cursor: pointer;
	}
</style>